<template>
  <div class="departments">
    <!--  卡片-->
    <el-card>
      <!--    tabs标签切换栏-->
      <el-tabs v-model="activeName">
        <el-tab-pane class="my-tab-pane" label="组织架构" name="first">
          <!--          头部结构-->
            <tree-tools :data="heardData" :is-root="true" @listUpdate="getAllList" @showDialog="showDialog" />
          <hr style="margin: 10px 0;">
          <!--        树形组件：el-tree -->
          <el-tree :data="list" default-expand-all>
            <tree-tools :data="data" slot-scope="{data}" @listUpdate="getAllList" @showDialog="showDialog"/>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
<!--    编辑部门弹框   @closeDialog="isShowDialog=false"   -->
    <add-dept ref="addDept" :is-show-dialog.sync="isShowDialog" :current-item="currentItem" @listUpdate="getAllList" />
  </div>
</template>

<script>
import TreeTools from "@/views/departments/components/treeTools";
//引入网络请求
import {companyDepartmentApi} from "@/api/departments";
import {resetCompanyDepartmentData} from "@/utils/resetData";
import AddDept from "@/views/departments/components/addDept";
export default {
  name: "departments",
  components: {AddDept, TreeTools},
  methods:{
   async getAllList(){
      const res= await companyDepartmentApi()
     // console.log(res)
     //保存组织架构数据
     // 过滤重构数据结构
     this.list = resetCompanyDepartmentData(res.depts,'')
     //将第一条数据取出，放到heardData
     this.heardData = {...res.depts[0],manager:'负责人'}
    },
    //弹出新增部门弹框
    showDialog(data){
     this.isShowDialog = true
      //保存当前新增的部门的父级数据
      this.currentItem = data
      // console.log(data)
      if(data.type === 'edit'){
        this.$refs.addDept.form = {...data}
      }
    }
  },
  created(){
    this.getAllList()
  },
  data() {
    return {
      activeName: 'first',
      //头部结构数据
      heardData:{label:'传智播客啦啦啦啦啦啦啦啦啦'},
      //树形结构的数据源
      list: [
        {
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }
      ],
      //是否显示编辑部门弹框
      isShowDialog:false,
      //保存当前新增的子部门的父级的数据
      currentItem: {}
    }
  }
}
</script>

<style scoped lang="scss">
.departments {
  padding: 30px;

  .my-tab-pane {
    padding: 50px 150px;
  }
}
</style>
